<template>
  <div class="rightDrawer-root">
    <lark-drawer border title="物联网设备" direction="right" width="400px" title-height="40px">
      <div v-loading="tableLoading" class="rightDrawer-body">
        物联网设备 {{baseId}}
      </div>

    </lark-drawer>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import { selectInfo } from '@/api/industry/cpf'

  export default {
    name: 'rightDrawer',
    props: {
      baseId: {
        type: [String, Number],
        default: ''
      }
    },
    setup(props, content) {
      let data = reactive({
        tableLoading: false
      })
      watch(() => props.baseId, () => {
        loadListData()
      })
      const loadListData = async() => {
        try {
          if (props.baseId == null) {
            return
          }
          data.tableLoading = true
        } finally {
          data.tableLoading = false
        }
      }
      return { ...toRefs(data) }
    }
  }
</script>

<style scoped lang="scss">
  .rightDrawer-root {
    .rightDrawer-body {
      padding: 10px;
      height: 48vh;
    }
  }
</style>
